<template>
  <div class="container" id="s">
    <van-nav-bar
      :title="userInfo.regStatus == 4 ? '资料修改' : '商户入网'"
      right-text="保存"
      left-arrow
      @click-left="goBack"
      @click-right="noSave"
    />
    <div class="content-box">
      <Remarks v-if="userInfo.regStatus == 4" :contents="userInfo.remarks" />
      <!-- 步骤条 -->
      <Steps
        :dataSource="[
          { name: '基本信息', checked: true },
          { name: '结算信息', checked: true },
          { name: '费率信息' },
          { name: '附件信息' },
        ]"
      />
      <!-- 主体 -->
      <van-form
        scroll-to-error
        input-align="right"
        ref="form"
        @submit="nextStep"
        @failed="failed"
      >
        <van-field
          class="mt-margin"
          name="uploader"
          :rules="[{ validator, message: '请上传开户许可证' }]"
          v-if="configEle.includes('eleAccountLicense')"
        >
          <template #label>
            <p class="attach-item-title">开户许可证</p>
            <p class="placholder">请上传开户许可证正面图片</p>
            <p class="example" @click="lookExample(openingImgExample)">
              查看示例&nbsp;
              <van-icon name="arrow" />
            </p>
          </template>
          <template #input>
            <UploaderImg
              v-model="openPermissionList"
              @uploadAfter="uploadOpenPermisionImg"
              @beforeDelete="deleteOpenPermisionImg"
            >
              <img
                class="preview-img"
                src="@/assets/store/opening-img.png"
                alt
              />
            </UploaderImg>
          </template>
        </van-field>

        <van-field
          v-if="configEle.includes('eleComAccName')"
          v-model="merchantForm.merchantFullName"
          @input="change1"
          disabled
          rows="1"
          autosize
          type="textarea"
          class="mt-margin"
          label="对公结算帐户名"
          name="merchantFullName"
        />
        <van-field
          v-if="configEle.includes('eleComAccNo')"
          v-model="formData.accountNum1"
          @input="change2"
          label="对公结算卡号"
          type="digit"
          name="accountNum1"
          placeholder="请输入对公结算卡号"
          :rules="[
            { required: true, message: '请输入对公结算卡号' },
            {
              pattern: /\S/,
              message: '请输入账户号码',
              trigger: 'onBlur',
            },
            {
              validator: (val) => {
                return val.length <= 25;
              },
              message: '请输入小于25个字符',
              trigger: 'onChange',
            },
          ]"
        />
        <van-field
          v-if="configEle.includes('eleApprovalNo')"
          v-model="formData.checkApproveNo"
          name="checkApproveNo"
          @input="change9"
          class="mt-margin"
          placeholder="请输入开户许可证核准号"
          label="核准号(选填)"
          :rules="[
            {
              pattern: /^[0-9a-zA-Z]{0,35}$/,
              message: '请输入字母+数字的随机组合',
              trigger: 'onChange',
            },
          ]"
        />
        <van-field
          v-if="configEle.includes('eleComBankName')"
          is-link
          readonly
          v-model="formData.bankId1Text"
          name="bankId1Text"
          label="开户银行"
          placeholder="请选择对公户开户银行名称"
          @click="showPopup(2)"
          :rules="[{ required: true, message: '请选择对公户开户银行名称' }]"
        />
        <van-field
          v-if="configEle.includes('eleComBankProvince')"
          is-link
          readonly
          v-model="formData.acconutArea1Text"
          name="acconutArea1Text"
          label="开户省市"
          placeholder="请选择省份、城市"
          @click="showPopup(4)"
          :rules="[{ required: true, message: '请选择省份、城市' }]"
        />
        <van-field
          v-if="configEle.includes('eleComBankBranch')"
          is-link
          readonly
          v-model="formData.branchBankId1text"
          label="开户支行"
          placeholder="请选择开户支行"
          @click="selectBranchbank1"
          name="branchBankId1text"
          :rules="[{ required: true, message: '请选择开户支行' }]"
        />
        <van-field
          v-if="configEle.includes('eleComAccMobile')"
          v-model="formData.accountMobile1"
          @input="change3"
          label="开户手机"
          placeholder="请输入开户手机号码"
          name="accountMobile1"
          :rules="[
            { required: true, message: '请输入开户手机号码' },
            {
              pattern: /^0?(13|14|15|16|17|18|19)[0-9]{9}$/,
              message: '手机号格式错误',
              trigger: 'onBlur',
            },
          ]"
        />
        <div
          class="attach-item"
          v-if="
            configEle.includes('eleSettleIDCardFrontImg') ||
            configEle.includes('eleSettleIDCardBackImg') ||
            configEle.includes('eleSettleIDCardHandingImg')
          "
        >
          <p class="attach-item-title">结算人身份证</p>
          <div class="upload-content">
            <van-field
              v-if="configEle.includes('eleSettleIDCardFrontImg')"
              class="upload-item"
              :rules="[{ validator, message: '请上传身份证人像面' }]"
              name="settleFontList"
            >
              <template #input>
                <div class="upload-item">
                  <UploaderImg
                    v-model="settleFontList"
                    @uploadAfter="uploadSettleFontImg"
                    @beforeDelete="deleteSettleFontImg"
                    :ocr-fun="SettleFontOcr"
                  >
                    <img
                      class="preview-img"
                      src="@/assets/store/idCard-font.png"
                      alt
                    />
                  </UploaderImg>
                  <p class="placholder">请上传身份证人像面</p>
                  <p class="example" @click="lookExample(idFontImgExample)">
                    查看示例&nbsp;
                    <van-icon name="arrow" />
                  </p>
                </div>
              </template>
            </van-field>
            <van-field
              v-if="configEle.includes('eleSettleIDCardBackImg')"
              class="upload-item"
              :rules="[{ validator, message: '请上传身份证国徽面' }]"
              name="settleBackList"
            >
              <template #input>
                <div class="upload-item">
                  <UploaderImg
                    v-model="settleBackList"
                    @uploadAfter="uploadSettleBackImg"
                    @beforeDelete="deleteSettleBackImg"
                    backgroundImg="@/assets/store/idCard-back.png"
                    :ocr-fun="SettleBackOcr"
                  >
                    <img
                      class="preview-img"
                      src="@/assets/store/idCard-back.png"
                      alt
                    />
                  </UploaderImg>
                  <p class="placholder">请上传身份证国徽面</p>
                  <p class="example" @click="lookExample(idBackImgExample)">
                    查看示例&nbsp;
                    <van-icon name="arrow" />
                  </p>
                </div>
              </template>
            </van-field>
            <van-field
              v-if="configEle.includes('eleSettleIDCardHandingImg')"
              class="upload-item"
              :rules="[{ validator, message: '请上传结算人手持身份证照' }]"
              name="settleHandFontList"
            >
              <template #input>
                <div class="upload-item">
                  <UploaderImg
                    v-model="settleHandFontList"
                    @uploadAfter="uploadSettleHandFontImg"
                    @beforeDelete="deleteSettleHandFontImg"
                    backgroundImg="@/assets/store/idHand-font.png"
                  >
                    <img
                      class="preview-img"
                      src="@/assets/store/idHand-font.png"
                      alt
                    />
                  </UploaderImg>
                  <p class="placholder">请上传手持身份证照</p>
                  <p class="example" @click="lookExample(idHandFontImgExample)">
                    查看示例&nbsp;
                    <van-icon name="arrow" />
                  </p>
                </div>
              </template>
            </van-field>
          </div>
        </div>

        <van-field
          v-if="configEle.includes('eleSettleName')"
          class="mt-margin"
          v-model="formData.settlementName"
          name="settlementName"
          @input="change4"
          label="结算人姓名"
          placeholder="请输入结算人身份证姓名"
          :rules="[
            {
              pattern: /^[\u4E00-\u9fa5a-zA-Z\uf900-\ufa2d·s]{1,50}$/,
              message: '请输入小于50位的中文/字母组合',
            },
          ]"
        />
        <van-field
          v-if="configEle.includes('eleSettleIdCardNo')"
          v-model="formData.settlementNum"
          name="settlementNum"
          @input="change5"
          @blur="handlePersonVerify"
          label="结算人证件号"
          placeholder="请输入结算人身份证号"
          :rules="[
            {
              pattern: /\S/,
              message: '请输入结算人证件号',
              trigger: 'onBlur',
            },
            {
              pattern: /^[0-9a-zA-Z]{1,18}$/,
              message: '请输入18位数字/字母组合类型',
              trigger: 'onChange',
            },
          ]"
        />
        <van-field
          v-if="configEle.includes('eleSettleIdCardPeriod')"
          is-link
          readonly
          v-model="formData.idCardStartTime"
          label="身份证有效期"
          placeholder="证件开始日期"
          @click="showPopup(6)"
        />
        <van-field
          v-if="configEle.includes('eleSettleIdCardPeriod')"
          is-link
          readonly
          v-model="formData.idCardEndTime"
          label
          placeholder="证件结束日期"
          @click="showPopup(7)"
          :rules="[
            {
              validator: ValidateIdCardEndTime,
              message: '结束日期不能小于开始日期',
              trigger: 'onChange',
            },
          ]"
        />
        <van-field
          class="mt-margin"
          name="uploader"
          :rules="[{ validator, message: '请上传银行卡卡号面' }]"
          v-if="configEle.includes('eleCardFrontImg')"
        >
          <template #label>
            <p class="attach-item-title">银行卡正面</p>
            <p class="placholder">请上传卡号面</p>
            <p class="example" @click="lookExample(bankImgExample)">
              查看示例&nbsp;
              <van-icon name="arrow" />
            </p>
          </template>
          <template #input>
            <UploaderImg
              v-model="bankCardList"
              @uploadAfter="uploadBankCardImg"
              @beforeDelete="deleteBankCardImg"
              :ocr-fun="BankCardOcr"
            >
              <img class="preview-img" src="@/assets/store/bank-img.png" alt />
            </UploaderImg>
          </template>
        </van-field>
        <van-field
          class="mt-margin"
          name="uploader"
          :rules="[{ validator, message: '请上传银行卡反面' }]"
          v-if="configEle.includes('eleCardBackImg')"
        >
          <template #label>
            <p class="attach-item-title">银行卡反面</p>
            <p class="placholder">请上传卡反面</p>
            <p class="example" @click="lookExample(bankImg2Example)">
              查看示例&nbsp;
              <van-icon name="arrow" />
            </p>
          </template>
          <template #input>
            <UploaderImg
              v-model="bankCard2List"
              @uploadAfter="uploadBankCard2Img"
              @beforeDelete="deleteBankCard2Img"
            >
              <img class="preview-img" src="@/assets/store/bank-img2.png" alt />
            </UploaderImg>
          </template>
        </van-field>
        <van-field
          v-if="configEle.includes('elePerAccName')"
          v-model="formData.accountName2"
          name="accountName2"
          @input="change6"
          disabled
          rows="1"
          autosize
          type="textarea"
          class="mt-margin"
          label="对私结算账户名"
          :placeholder="'请输入' + formData.acconutTypeText + '姓名'"
        />
        <van-field
          v-if="configEle.includes('elePerAccNo')"
          v-model="formData.accountNum2"
          name="accountNum2"
          @input="change7"
          type="digit"
          label="对私结算卡号"
          :placeholder="'请输入' + formData.acconutTypeText + '号码'"
          :rules="[
            {
              pattern: /\S/,
              message: '请输入对私结算卡号',
              trigger: 'onBlur',
            },
            {
              validator: (val) => {
                if (val.length > 25) {
                  return false;
                } else {
                  return true;
                }
              },
              message: '请输入小于25个字符',
              trigger: 'onChange',
            },
          ]"
        />
        <van-field
          v-if="configEle.includes('elePerBankName')"
          is-link
          readonly
          v-model="formData.bankId2Text"
          label="开户银行"
          placeholder="请选择对私户开户银行名称"
          @click="showPopup(3)"
          :rules="[{ required: true, message: '请选择对私户开户银行名称' }]"
        />
        <van-field
          v-if="configEle.includes('elePerBankProvince')"
          is-link
          readonly
          v-model="formData.acconutArea2Text"
          label="开户省市"
          placeholder="请选择省份、城市"
          @click="showPopup(5)"
          :rules="[{ required: true, message: '请选择省份、城市' }]"
        />
        <van-field
          v-if="configEle.includes('elePerBankBranch')"
          is-link
          readonly
          v-model="formData.branchBankId2Text"
          label="开户支行"
          placeholder="请选择开户支行"
          @click="selectBranchbank2"
          :rules="[{ required: true, message: '请选择开户支行' }]"
        />
        <van-field
          v-if="configEle.includes('elePerAccMobile')"
          v-model="formData.accountMobile2"
          @input="change8"
          label="开户手机"
          placeholder="请输入开户手机号码"
          :rules="[
            {
              pattern: /^0?(13|14|15|16|17|18|19)[0-9]{9}$/,
              message: '手机号格式错误',
              trigger: 'onBlur',
            },
          ]"
        />
        <div v-if="configEle.includes('eleSettlementDesc')" class="notes">
          {{ eleSettlementDesc.eleDefaultValue || "" }}
        </div>
        <van-button
          block
          type="info"
          color="#FFB72F"
          native-type="submit"
          class="next-step-btn"
          >下一步</van-button
        >
      </van-form>
      <!-- 弹窗内容 -->

      <van-popup v-model="show2" position="bottom">
        <van-picker
          title="选择银行"
          show-toolbar
          :columns="bankList"
          @confirm="selectBank1"
          @cancel="onCancel(2)"
        />
      </van-popup>
      <van-popup v-model="show3" position="bottom">
        <van-picker
          title="选择银行"
          show-toolbar
          :columns="bankList"
          @confirm="selectBank2"
          @cancel="onCancel(3)"
        />
      </van-popup>
      <van-popup v-model="show4" position="bottom">
        <van-picker
          show-toolbar
          title="请选择地区"
          @change="onAreaChange"
          @cancel="onCancel(4)"
          @confirm="onAreaConfirm1"
          :columns="areaColumns"
        />
      </van-popup>
      <van-popup v-model="show5" position="bottom">
        <van-picker
          show-toolbar
          title="请选择地区"
          @change="onAreaChange"
          @cancel="onCancel(5)"
          @confirm="onAreaConfirm2"
          :columns="areaColumns"
        />
      </van-popup>
      <van-popup v-model="show6" position="bottom">
        <van-datetime-picker
          v-model="currentDate1"
          type="date"
          title="开始日期"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="selectTime1"
          @cancel="onCancel(6)"
        />
      </van-popup>
      <van-popup v-model="show7" position="bottom">
        <van-datetime-picker
          v-model="currentDate2"
          type="date"
          title="结束日期"
          cancel-button-text="长期"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="selectTime2"
          @cancel="longTime"
        />
      </van-popup>

      <van-dialog
        v-model="showExample"
        title="查看示例"
        confirmButtonText="关闭"
        confirmButtonColor="#FFB72F"
      >
        <div class="example-container">
          <img :src="exampleImg" class="example-img" />
        </div>
      </van-dialog>
    </div>
  </div>
</template>

<script>
import openingImgExample from "@/assets/store/openingimg-example.jpg";
import idFontImgExample from "@/assets/store/idCard-font-example.png";
import idBackImgExample from "@/assets/store/idCard-back-example.png";
import bankImgExample from "@/assets/store/bank-img-example.png";
import bankImg2Example from "@/assets/store/bank-img2-example.png";
import idHandFontImgExample from "@/assets/store/idHand-font-example.png";
import { bankFontOcr, idCardOcr } from "@/api/upload";
import { getBankList } from "@/api/bank";
import { getAreaData } from "@/api/area";
import { GMTToStr } from "@/utils/tools";
import { save } from "@/api/stores";
import { isBlacklist } from "@/api/merchant";
export default {
  name: "Step2",
  components: {
    HeaderComp: () => import("@/components/HeaderComps"),
    Remarks: () => import("@/components/Remarks"),
    Steps: () => import("@/components/steps"),
    UploaderImg: () => import("@/components/UploaderImg"),
  },
  data() {
    return {
      openingImgExample,
      bankImgExample,
      bankImg2Example,
      idFontImgExample,
      idBackImgExample,
      idHandFontImgExample,
      exampleImg: "",
      showExample: false,
      showExample1: false,
      formData: {
        acconutArea1: "",
        acconutArea1Text: "",
        acconutArea2: "",
        acconutArea2Text: "",
        acconutType: "",
        accountMobile1: "",
        accountMobile2: "",
        accountName1: "",
        accountName2: "",
        accountNum1: "",
        accountNum2: "",
        acconutType: "",
        acconutTypeText: "",
        bankId1: "",
        bankId1Text: "",
        bankId2: "",
        bankId2Text: "",
        branchBankId1: "",
        branchBankId1text: "",
        branchBankId2: "",
        branchBankId2Text: "",
        idCardEndTime: "",
        idCardStartTime: "",
        is_step2: "",
        no_step2: "",
        openPermissionImg: "",
        settleBackImg: "",
        settleFontImg: "",
        settleHandFontImg: "",
        settlementName: "",
        settlementNum: "",
      },
      accountTypies: [
        {
          text: "法人对公",
          value: "1",
          disabled: this.$store.state.merchant.merchantType == 3,
        },
        {
          text: "法人对私",
          value: "2",
        },
        {
          text: "非法人对私",
          value: "3",
          disabled: this.$store.state.merchant.merchantType == 3,
        },
      ],
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      show6: false,
      show7: false,
      openPermissionList: [],
      settleFontList: [],
      settleBackList: [],
      bankCardList: [],
      bankCard2List: [],
      settleHandFontList: [],
      bankList: [],
      areaColumns: [
        {
          values: [],
          defaultIndex: 0,
        },
        {
          values: [],
          defaultIndex: 0,
        },
        {
          values: [],
          defaultIndex: 0,
        },
      ],
      currentDate1: new Date(
        new Date().getFullYear(),
        new Date().getMonth(),
        new Date().getDate()
      ),
      currentDate2: new Date(
        new Date().getFullYear(),
        new Date().getMonth(),
        new Date().getDate()
      ),
      minDate: new Date(1971, 0, 1),
      maxDate: new Date(2060, 10, 1),
      T1: true,
      T2: true,
      T3: true,
    };
  },
  computed: {
    userInfo() {
      return this.$store.state.user.userInfo;
    },
    merchantForm() {
      return this.$store.state.merchant;
    },
    settlement() {
      return this.$store.state.settlement;
    },
    configEle() {
      console.log(
        this.$store.state.common.config.map((item) => item.configEle)
      );
      return this.$store.state.common.config.map((item) => item.configEle);
    },
    eleSettlementDesc() {
      const item = this.$store.state.common.config.find(
        (item) => item.configEle === "eleSettlementDesc"
      );
      return item;
    },
  },
  watch: {
    formData: {
      handler() {
        const storeType = this.merchantForm.merchantType;
        const acconutType = this.settlement.acconutType;
        console.log(storeType, acconutType);
        if (acconutType == 1 && [1, 2].includes(storeType)) {
          this.formData.accountName1 = this.merchantForm.merchantFullName;
          this.$store.commit(
            "ISetAccountName1",
            this.merchantForm.merchantFullName
          );
        } else if (storeType == 1 && acconutType == 2) {
          this.formData.accountName1 = this.merchantForm.merchantFullName;
          this.$store.commit(
            "ISetAccountName1",
            this.merchantForm.merchantFullName
          );
          this.formData.accountName2 = this.merchantForm.legalName;
          this.$store.commit("ISetAccountName2", this.merchantForm.legalName);
        } else if (storeType == 1 && acconutType == 3) {
          this.formData.accountName1 = this.merchantForm.merchantFullName;
          this.$store.commit(
            "ISetAccountName1",
            this.merchantForm.merchantFullName
          );
          this.formData.accountName2 = this.formData.settlementName;
          this.$store.commit("ISetAccountName2", this.formData.settlementName);
        } else if (storeType == 2 && acconutType == 2) {
          this.formData.accountName2 = this.merchantForm.legalName;
          this.$store.commit("ISetAccountName2", this.merchantForm.legalName);
        } else if (storeType == 2 && acconutType == 3) {
          this.formData.accountName2 = this.formData.settlementName;
          this.$store.commit("ISetAccountName2", this.formData.settlementName);
        } else if (storeType == 3 && acconutType == 2) {
          this.formData.accountName2 = this.formData.settlementName;
          this.$store.commit("ISetAccountName2", this.formData.settlementName);
        }
      },
      deep: true,
    },
    "formData.settlementName"(val) {
      console.log(val);
    },
  },
  created() {
    if (this.settlement.openPermissionImg) {
      this.openPermissionList = [{ url: this.settlement.openPermissionImg }];
    }
    if (this.settlement.settleFontImg) {
      this.settleFontList = [{ url: this.settlement.settleFontImg }];
    }
    if (this.settlement.settleHandFontImg) {
      this.settleHandFontList = [{ url: this.settlement.settleHandFontImg }];
    }
    if (this.settlement.settleBackImg) {
      this.settleBackList = [{ url: this.settlement.settleBackImg }];
    }
    if (this.settlement.bankCardImg) {
      this.bankCardList = [{ url: this.settlement.bankCardImg }];
    }
    if (this.settlement.bankCard2Img) {
      this.bankCard2List = [{ url: this.settlement.bankCard2Img }];
    }
    let form = this.$store.state.settlement;
    let newform = JSON.parse(JSON.stringify(form));
    this.formData = Object.assign(this.formData, newform);
    this.getBankLists();
    this.getProvince("00");
    const content = document.querySelector(".content-box");
    content.scrollIntoView(true);
    // console.log(content);
    this.$nextTick(() => {
      window.scrollTo({
        left: 0,
        top: 0,
        // behavior: "smooth"
      });
    });
    console.log("created");
  },
  methods: {
    // 保存
    noSave() {
      this.$dialog
        .confirm({
          title: "商户认证",
          message: `<div style="font-size:16px;line-height:12px;">
                <p>确认是否保存资料？</p> </div>`,
          cancelButtonText: "取消",
          // cancelButtonColor: "#FFB72F",
          confirmButtonText: "确认",
          confirmButtonColor: "#FFB72F",
        })
        .then(() => {
          // 保存资料
          this.$store.commit("setComplete", 0);
          this.$toast({
            type: "loading",
            message: "正在提交...",
            forbidClick: true,
            duration: 0,
          });
          save(this.$store.state)
            .then((res) => {
              //   document.title = "提交成功";
              this.$toast.clear();
              if (res.code == 200) {
                this.$toast({
                  type: "success",
                  message: "保存成功",
                  duration: 1500,
                });
                this.$store.dispatch("setSaved", true);
              } else {
                this.$toast({
                  message: res.msg || "操作失败",
                  duration: 2000,
                  forbidClick: true,
                });
              }
            })
            .catch((err) => {
              this.$toast.clear();
              document.title = "返回APP";
            });
          // next();
        })
        .catch(() => {
          // 取消
          // document.title = "返回APP";
          // next();
        });
    },
    ValidateIdCardEndTime(val) {
      let startUTC = new Date(this.formData.idCardStartTime).getTime();
      let endtUTC = new Date(val).getTime();
      if (val == "88888888") {
        return true;
      } else if (startUTC > endtUTC) {
        this.$store.commit("setIdCardEndTime", "");
        return false;
      } else {
        return true;
      }
    },
    selectTime1(value) {
      this.formData.idCardStartTime = GMTToStr(value);
      this.$store.commit("setIdCardStartTime", GMTToStr(value));
      this.show6 = false;
    },
    selectTime2(value) {
      this.formData.idCardEndTime = GMTToStr(value);
      this.$store.commit("setIdCardEndTime", GMTToStr(value));
      this.show7 = false;
    },
    longTime(e) {
      this.formData.idCardEndTime = "88888888";
      this.$store.commit("setIdCardEndTime", "88888888");
      this.show7 = false;
    },
    getProvince(parentCode) {
      getAreaData(parentCode).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          let areaList = [];
          data.forEach((i) => {
            areaList.push({
              text: i.name,
              code: i.code,
              id: i.id,
            });
          });
          this.areaColumns[0].values = areaList;
          this.getCity(areaList[0].code);
        }
      });
    },
    getCity(parentCode) {
      getAreaData(parentCode).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          let areaList = [];
          data.forEach((i) => {
            areaList.push({
              text: i.name,
              code: i.code,
              id: i.id,
            });
          });
          this.areaColumns[1].values = areaList;
          this.getDistric(areaList[0].code);
        }
      });
    },
    getDistric(parentCode) {
      getAreaData(parentCode).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          let areaList = [];
          data.forEach((i) => {
            areaList.push({
              text: i.name,
              code: i.code,
              id: i.id,
            });
          });
          this.areaColumns[2].values = areaList;
        }
      });
    },
    //当地区选择变化时
    onAreaChange(picker, values, index) {
      if (index == 0) {
        this.getCity(values[index].code);
      } else if (index == 1) {
        this.getDistric(values[index].code);
      }
    },
    //点击确定
    onAreaConfirm1(value) {
      let province = "";
      let provinceId = "";
      let city = "";
      let cityId = "";
      let district = "";
      let districtId = "";

      if (value[2] && value[2].code) {
        district = value[2].text;
        districtId = value[2].id;
      }
      if (value[1] && value[1].code) {
        city = value[1].text;
        cityId = value[1].id;
      }
      if (value[0] && value[0].code) {
        province = value[0].text;
        provinceId = value[0].id;
      }
      this.$store.commit("setAccountArea1", {
        acconutArea1: [provinceId, cityId, districtId],
        acconutArea1Text: province + city + district,
      });
      this.formData.acconutArea1Text = province + city + district;
      this.$store.commit("setBranchBankId1", {
        bankName: "",
        id: "",
      });
      this.formData.branchBankId1text = "";
      this.show4 = false;
    },
    onAreaConfirm2(value) {
      let province = "";
      let provinceId = "";
      let city = "";
      let cityId = "";
      let district = "";
      let districtId = "";

      if (value[2] && value[2].code) {
        district = value[2].text;
        districtId = value[2].id;
      }
      if (value[1] && value[1].code) {
        city = value[1].text;
        cityId = value[1].id;
      }
      if (value[0] && value[0].code) {
        province = value[0].text;
        provinceId = value[0].id;
      }
      this.$store.commit("setAccountArea2", {
        acconutArea2: [provinceId, cityId, districtId],
        acconutArea2Text: province + city + district,
      });
      this.formData.acconutArea2Text = province + city + district;
      this.$store.commit("setBranchBankId2", {
        bankName: "",
        id: "",
      });
      this.formData.branchBankId2Text = "";
      this.show5 = false;
    },
    selectBank1(data, index) {
      this.formData.bankId1 = data.value;
      this.formData.bankId1Text = data.text;
      this.$store.commit("setBankId1", data);
      this.$store.commit("setBranchBankId1", {
        bankName: "",
        id: "",
      });
      this.formData.branchBankId1text = "";
      this.show2 = false;
    },
    selectBank2(data, index) {
      this.formData.bankId2 = data.value;
      this.formData.bankId2Text = data.text;
      this.$store.commit("setBankId2", data);
      this.$store.commit("setBranchBankId2", {
        bankName: "",
        id: "",
      });
      this.formData.branchBankId2Text = "";
      this.show3 = false;
    },
    getBankLists() {
      getBankList().then((res) => {
        if (res.code == 200) {
          let bankList = res.data;
          let newBankList = [];
          bankList.forEach((i) => {
            newBankList.push({
              text: i.bankName,
              value: i.id,
            });
          });
          this.bankList = newBankList;
        }
      });
    },
    change1(val) {
      this.$store.commit("ISetAccountName1", val); //公户户名
    },
    change2(val) {
      if (val.length > 25) {
        this.$store.commit("ISetAccountNum1", ""); //公户号码
      } else {
        this.$store.commit("ISetAccountNum1", val); //公户号码
      }
    },
    change3(val) {
      if (!/^0?(13|14|15|16|17|18|19)[0-9]{9}$/.test(val)) {
        this.$store.commit("ISetAccountMobile1", ""); //公户开户手机
      } else {
        this.$store.commit("ISetAccountMobile1", val); //公户开户手机
      }
    },
    change4(val) {
      if (!/^[\u4E00-\u9fa5a-zA-Z\uf900-\ufa2d·s]{1,255}$/.test(val)) {
        this.$store.commit("ISetSettlementName", ""); //结算人姓名
      } else {
        this.$store.commit("ISetSettlementName", val); //结算人姓名
      }
    },
    change5(val) {
      if (!/^[0-9a-zA-Z]{1,18}$/.test(val)) {
        this.$store.commit("ISetSettlementNum", ""); //结算人证件号
      } else {
        this.$store.commit("ISetSettlementNum", val); //结算人证件号
      }
    },
    change6(val) {
      this.$store.commit("ISetAccountName2", val); //私户户名
    },
    change7(val) {
      if (val.length > 25) {
        this.$store.commit("ISetAccountNum2", ""); //私户号码
      } else {
        this.$store.commit("ISetAccountNum2", val); //私户号码
      }
    },
    change8(val) {
      if (!/^0?(13|14|15|16|17|18|19)[0-9]{9}$/.test(val)) {
        this.$store.commit("ISetAccountMobile2", ""); //私户开户手机
      } else {
        this.$store.commit("ISetAccountMobile2", val); //私户开户手机
      }
    },
    change9(val) {
      this.$store.commit("ISetCheckApproveNo", val); //核准号
    },
    onOversize() {
      this.$toast("图片过大无法上传\n请上传10MB以内的图片！");
    },
    // 银行卡正面
    deleteBankCardImg() {
      this.bankCardList = [];
      this.$store.commit("PSetBankCardImg", "");
    },
    uploadBankCardImg(link) {
      return new Promise((resolve) => {
        bankFontOcr(link)
          .then((result) => {
            if (!result.bankInfo) {
              this.bankCardList = [];
              this.bankCardList.push({
                url: link,
              });
              this.$store.commit("PSetBankCardImg", link);
            } else {
              this.formData.accountNum2 = result.cardNo;
              this.change7(result.cardNo);
              this.bankCardList = [];
              this.bankCardList.push({
                url: link,
              });
              this.$store.commit("PSetBankCardImg", link);
            }
            resolve();
          })
          .catch((error) => {
            this.bankCardList = [];
            this.bankCardList.push({
              url: link,
            });
            this.$store.commit("PSetBankCardImg", link);
            //   file.message = "OCR识别失败";
          });
      });
    },
    BankCardOcr(link) {
      return new Promise((resolve) => {
        bankFontOcr(link)
          .then((result) => {
            if (!result.bankInfo) {
              this.bankCardList = [];
              this.bankCardList.push({
                url: link,
              });
              this.$store.commit("PSetBankCardImg", link);
            } else {
              this.formData.accountNum2 = result.cardNo;
              this.change7(result.cardNo);
              this.bankCardList = [];
              this.bankCardList.push({
                url: link,
              });
              this.$store.commit("PSetBankCardImg", link);
            }
            resolve();
          })
          .catch((error) => {
            this.bankCardList = [];
            this.bankCardList.push({
              url: link,
            });
            this.$store.commit("PSetBankCardImg", link);
          });
      });
    },
    //加结算人手持身份证照
    uploadSettleHandFontImg(link) {
      this.$store.commit("PSetSettleHandFontImg", link);
    },
    deleteSettleHandFontImg() {
      this.settleHandFontList = [];
      this.$store.commit("PSetSettleHandFontImg", "");
    },
    //银行卡反面
    uploadBankCard2Img(link) {
      this.$store.commit("PSetBankCard2Img", link);
    },
    deleteBankCard2Img() {
      this.bankCard2List = [];
      this.$store.commit("PSetBankCard2Img", "");
    },
    // 结算户身份证反面
    deleteSettleBackImg() {
      this.settleBackList = [];
      this.$store.commit("PSetSettleBackImg", "");
    },
    uploadSettleBackImg(link) {
      this.$store.commit("PSetSettleBackImg", link);
    },
    SettleBackOcr(link) {
      const settleBackList = [
        {
          url: link,
        },
      ];
      return new Promise((resolve) => {
        idCardOcr(link)
          .then((result) => {
            let arr = result.validDate.split("-");
            let start = arr[0].replace(/\./g, "/");
            let end =
              arr[1] == "长期" ? "88888888" : arr[1].replace(/\./g, "/");
            this.formData.idCardStartTime = start;
            this.formData.idCardEndTime = end;
            this.$store.commit("setIdCardStartTime", start);
            this.$store.commit("setIdCardEndTime", end);

            this.settleBackList = settleBackList;
            this.$store.commit("PSetSettleBackImg", link);
            resolve();
          })
          .catch((error) => {
            console.log(error);
            resolve();
            this.settleBackList = settleBackList;
            this.$store.commit("PSetSettleBackImg", link);
          });
      });
    },
    // 结算户身份证正面
    deleteSettleFontImg() {
      this.settleFontList = [];
      this.$store.commit("PSetSettleFontImg", "");
    },
    uploadSettleFontImg(link) {
      this.$store.commit("PSetSettleFontImg", link);
    },
    SettleFontOcr(link) {
      const settleFontList = [
        {
          url: link,
        },
      ];
      return new Promise((resolve) => {
        idCardOcr(link)
          .then((result) => {
            this.formData.settlementName = result.name;
            this.formData.settlementNum = result.idNum;
            this.change4(result.name);
            this.change5(result.idNum);
            this.settleFontList = settleFontList;
            this.$store.commit("PSetSettleFontImg", link);
            console.log(result, "result");
            resolve();
          })
          .catch((error) => {
            console.log(error);
            resolve();
            this.settleFontList = settleFontList;
            this.$store.commit("PSetSettleFontImg", link);
          });
      });
    },
    // 开户许可证
    deleteOpenPermisionImg() {
      this.openPermissionList = [];
      this.$store.commit("PSetOpenPermissionImg", "");
    },
    uploadOpenPermisionImg(link) {
      this.$store.commit("PSetOpenPermissionImg", link);
    },
    selectBranchbank1() {
      this.$router.push({
        path: "/selectbank1",
      });
    },
    selectBranchbank2() {
      this.$router.push({
        path: "/selectbank2",
      });
    },
    lookExample(url) {
      this.exampleImg = url;
      this.showExample = true;
    },

    goBack() {
      this.$router.push({
        path: "/submitInfo/step2",
      });
    },
    selectAccountTyepe(data, index) {
      this.formData.acconutTypeText = data.text;
      this.formData.acconutType = data.value;
      this.$store.commit("setacconutType", data);
      if (data.value == 1) {
        this.$store.commit(
          "ISetAccountName1",
          this.merchantForm.merchantFullName
        );
      } else if (data.value == 2) {
        this.$store.commit(
          "ISetAccountName1",
          this.merchantForm.merchantFullName
        );
        this.$store.commit("ISetAccountName2", this.merchantForm.legalName);
      }
      this.show1 = false;
    },
    onCancel(e) {
      this[`show${e}`] = false;
    },
    showPopup(e) {
      if (e == 7 && !this.formData.idCardStartTime) {
        this.$toast("请先选择开始日期");
        return false;
      }
      this[`show${e}`] = true;
    },
    nextStep() {
      this.$store.commit("setRateSectioin");
      this.$router.push({
        path: "/submitInfo/step4",
      });
    },
    failed(errorInfo) {
      console.log(errorInfo);
    },
    handlePersonVerify() {
      if (
        /^[0-9a-zA-Z]{1,18}$/.test(this.formData.settlementNum) &&
        this.formData.settlementNum.length == 18
      ) {
        isBlacklist(this.formData.settlementNum).then(({ data }) => {
          if (data.isBlacklist) {
            let msg = data.consumerHotline
              ? `结算人证件号填写失败，代码1000，请联系客服${data.consumerHotline}`
              : `结算人证件号填写失败，代码1000`;
            this.$toast(msg);
          }
        });
      }
    },
    validator(val) {
      const check = val.filter((item) => item.url);
      return check.length > 0;
    },
  },
};
</script>
<style scoped lang="less">
.container {
  overflow: hidden;
}
.content-box {
  height: calc(100vh - 120px);
  overflow-y: scroll;
}

/deep/.van-field__label {
  color: #323233;
}
/deep/.van-dialog__content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 57px 0;
}
.preview-img {
  width: 325px;
  height: 215px;
  margin: 0 16px 16px 0;
}

.next-step-btn {
  width: 80%;
  margin: 50px auto;
}
.app {
  background: #f9f9f9;
}
.content-box {
  background: #f9f9f9;
  padding-bottom: 1px;
  box-sizing: border-box;
}

.mt-margin {
  margin-top: 24px;
}
.example-container {
  padding: 0 100px;
  max-height: 60vh;
  overflow-y: scroll;
}
.example-container::-webkit-scrollbar {
  display: none;
}
.example-img {
  width: 100%;
  height: 100%;
}
.attach-item {
  margin-top: 24px;
  background: #fff;
  padding: 35px 32px;
  p.attach-item-title {
    font-size: 30px;
    font-weight: 400;
    color: #131313;
  }
}
.upload-title {
  text-align: left;
  font-size: 30px;
  font-weight: 400;
  color: #131313;
  width: calc(100vw - 64px);
}
.upload-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: calc(100vw - 64px);
  flex-wrap: wrap;
  .attach-label {
    width: 45%;
    padding-left: 5px;
  }
  .upload-item {
    width: auto;
    min-height: 220px;
    padding: 10px 0;
  }
}
.placholder {
  font-size: 28px;
  font-weight: 400;
  color: #131313;
  margin: 12px 0;
  text-align: center;
  opacity: 0.8;
}
.example {
  display: flex;
  align-items: center;
  color: #ffb72f;
  justify-content: center;
}
.notes {
  font-size: 28px;
  font-weight: 400;
  color: #131313;
  opacity: 0.7;
  padding: 24px 35px 0;
  line-height: 35px;
  white-space: pre-wrap;
}
/deep/.van-nav-bar__title {
  font-size: 36px !important;
}
/deep/ .van-nav-bar__text {
  color: #ffb72f !important;
}
/deep/ .van-nav-bar__content {
  height: 110px !important;
}
/deep/ .van-field__label {
  width: auto !important;
}
</style>